<template>
  <div v-for="(item, index) in items" :key="item.id">
    <div class="nav_right" :id="index + ''">
      <div class="nav_right_title">
        <a href="#" :class="{ active: index === activeIndex }">{{ item.name }}</a>
        <a href="#"> <van-icon name="arrow" /></a>
      </div>
      <div class="nav_right_content">
        <a href="#" v-for="item1 in item.channels" :key="item1.channelId">{{ item1.channelName }}</a>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import type { groupsModel } from '@/api/index';
defineProps<{
  items: groupsModel[],
  activeIndex: number
}>()
</script>
<style lang="less">
.nav_right {
  //    width: 310px;
  font-size: 14px;

  .nav_right_title {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    //  width: 285px;
    height: 50px;
    line-height: 50px;
    border-bottom: .5px solid #e8e8e8;

    font-weight: 600;

    a {
      color: #40404c;
    }
  }

  .nav_right_title .active {
    color: rgb(254, 121, 89);
  }

  .nav_right_content {
    display: flex;
    flex-wrap: wrap;

    a {
      display: inline-block;
      height: 35px;
      padding: 7.5px;
      color: #7e8c8d;
      ;
    }
  }
}
</style>